<template>
  <div class="card">
      <div class="image">
          <img :src="url" :alt="title">
          <div class="title">
            {{title}}
            </div>
      </div>

      <div class="button">{{buttonText}}</div>
  </div>
</template>

<script>
export default {
    name: "Card",
    data(){
        return {
            buttonText: "点击查看"
        }
    },
    props: {
        url: String,
        title: String,
    }
}
</script>

<style>
.card {
    width: 47%;
    /* height: 197px; */
    font-size: 14px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px 5px;
}
.image {
    border-radius: 5px;
    width: 96%;
    margin: 5px 0;
}
.image img {
    width: 100%;
    height: 63%;
    /* height: 22vh; */
}
.title {
    margin: 10px 0;
    text-align: left;
    margin-left: 5px;
    height: 37px;
}
.button {
   border-radius: 30px;
   color: #fff;
   background-color: #76c1ff;
   width: 90%;
   margin-bottom: 11px; 
   padding: 5px 0;
}

</style>